<template>
	<el-container style="height: 550px; border: 1px solid #eee">
		<el-container>
			<el-main>
				<el-form label-width="150px">
					<b>Tips:</b> 
					<br>1. Converts OpenAPI docs to CloudTest Cases. (Do not forget rename Case File Path to new).
					<br>2. OpenAPI Docs suports apidoc in 'url','json' or 'yaml' format. Either of them works fine.
					<el-form-item align="right">
						<span>
							<el-button type="primary" @click="convert">Convert</el-button></span>
					</el-form-item>
					<el-form-item label="Case File Path">
						<el-input v-model="openApi2Case.casePath"></el-input>
					</el-form-item>
					<el-form-item label="Tag Matchers">
						<el-input v-model="openApi2Case.tagMatchers" placeholder = "multiple regex matchers using ',' to split"></el-input>
					</el-form-item>
					<el-form-item label="OpenAPI Docs">
						<div ref="container" class style="position: absolute;height: 350px; width: 100%"></div>
					</el-form-item>
				</el-form>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
//import * as monaco from 'monaco-editor/esm/vs/editor/editor.api.js';
//import 'monaco-editor/esm/vs/editor/editor.main.js';
import * as monaco from 'monaco-editor';
import converterApi from '/@/api/cloudtest/convert.ts'
import { ElMessage } from 'element-plus';

let editor = null;

export default {
	watch: {},

	methods: {
		convert() {
			// 更改editor内容
			this.openApi2Case.apiDocs = editor.getValue();

			//console.log(this.openApi2Case.apiDocs);
			//console.log(converterApi.convert);

			if(this.openApi2Case.apiDocs!=null && this.openApi2Case.apiDocs.length > 0){
				const loading = this.$loading({
					lock: true,
					text: 'Converting in process, Please wait ...',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)',
				});

				converterApi.convert(this.openApi2Case).then(response =>{
					//console.log(response);
					loading.close();

					if(response.status){
						ElMessage.success({
							message: 'Convert Success',
							type: 'success'
						});
					}else{
						ElMessage.error({
							message: response.message,
							type: 'error'
						});
					}
				}).catch((error) =>{
					console.log(error);
					ElMessage.error(JSON.stringify(error));
				});
			}else{
				ElMessage.error('OpenAPI Docs is empty, either OpenAPI URL or JSON/YMAL content is working.');
			}
			

		}
	},

	destroied() {
		editor.dispose();
	},

	unmounted() {
		editor.dispose();
	},
	mounted() {
		editor = monaco.editor.create(this.$refs.container, {
			value: 'https://petstore.swagger.io/v2/swagger.json',
			automaticLayout: true,
			//language: 'json',
		});
	},
	data() {
		return {
			openApi2Case: {
				casePath: 'TestCase/openapi/petstore.tc.xml',
				tagMatchers:'',
				apiDocs: 'https://petstore.swagger.io/v2/swagger.json'
			},
		};
	},
};
</script>
<style></style>
